<template>
    <div class="container">
        <div class="msg">{{nowvalue}}/{{allvalue}}</div>
        <svg>
            <circle cx="34" cy="36" r="30" fill="none" stroke="#cccccc" stroke-width="5" stroke-linecap="round"/>
            <circle class="demo2" :id="indexid" cx="74" cy="34" r="30" fill="none" stroke="#0640a4" stroke-width="5" stroke-dasharray="0,10000"/>
        </svg>
    </div>
</template>

<script>
export default {
  name: 'circles',
  props: {
    allvalue: {
      type: Number,
      default: 0
    },
    nowvalue: {
      type: Number
    },
    indexid: {
      type: String
    }
  },
  mounted () {
    let that = this
    setTimeout(function () {
      that.changeCircle()
    }, 1)
  },
  methods: {
    changeCircle () {
      let nowvalue = this.nowvalue
      let allvalue = this.allvalue
      let demo2 = document.querySelector('#' + this.indexid)
      let circleLength = Math.floor(2 * Math.PI * demo2.getAttribute('r'))
      let val = parseFloat(nowvalue).toFixed(2)
      val = Math.max(0, val)
      val = Math.min(allvalue, val)
      let num = circleLength * val / allvalue
      demo2.setAttribute('stroke-dasharray', '' + num + ',10000')
    }
  }
}
</script>

<style lang="scss" scoped>
    .container{
        width: 66px;
        position: relative;
        top: -18px;
        height: 60px;
        .msg{
            position: absolute;
            top: 30px;
            left: 16%;
            font-size: 12px;
            width: 46px;
            text-align: center
        }
    }
    .demo2{
        transform-origin: 55px 55px;
        transform: rotate(-90deg);
        transition: stroke-dasharray .3s ease-in;
    }
</style>
